<template>
  <div>
    <div ref="wordDiv" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<script setup>
import 'echarts-wordcloud'
import * as echarts from 'echarts'
import { ListCompany } from "@/api/screen/company.js";
import { onMounted, ref, onBeforeUnmount } from 'vue';

const wordDiv = ref(null)
const dataList = ref([])
let timer = null;
onMounted(async () => {
  await getList()
  timer = setInterval(async () => {
    await renderCharts();
  }, 3000);
})
//随机颜色  
function randomRGB() {
  //随机产生一个0-255之间的的值  rgb 最大色值255
  const r = Math.floor(Math.random() * 255)
  const g = Math.floor(Math.random() * 255)
  const b = Math.floor(Math.random() * 255)
  return `rgb(${r},${g},${b})`;
}

const getList = async () => {
  const response = (await ListCompany()).data;
  // console.log(response)

  dataList.value = response.map(item => ({
    name: item.companyName,
    value: item.recruitCount
  }))

  await renderCharts();
}

async function renderCharts() {

  const option = {
    series: [
      {
        type: 'wordCloud',
        //文本大小范围
        sizeRange: [10, 90],
        //文本旋转范围
        rotationRange: [0, 90],
        // 控制词语旋转的步长
        rotationStep: 10,
        //内容间距
        gridSize: 10,
        //渲染效果
        layoutAnimation: true,
        textStyle: {
          color: randomRGB
        },
        //选中效果
        emphasis: {
          textStyle: {
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        data: dataList.value
      }
    ]
  }
  echarts.init(wordDiv.value).setOption(option)
}

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  }
});

</script>

<style></style>